<template>
  <div class="jibing-chaxun">
    <div class="d-f">
        <input type="text" placeholder="请输入想要查询的部位" v-model="inputvalue" autofocus="autofocus">
        <div class="sousuo" @click="getsearch(page)">搜索</div>
    </div>
    <div v-show='itemjieguo!="111"'>
        <div class="nr" v-show='itemjieguo !== undefined || itemjieguo.length !=0'>
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                <!-- <van-cell class="item" v-for="(item,index) in itemjieguo" 
                :key='index'
               
                >{{item.title}}
                    
                </div> -->

                 <van-cell

                    v-for="(item,index) in itemjieguo"
                    :key="index"
                    :title="item.title"
                     @click="todetails($event,item.id)"
                />
            </van-list>
        </div>

        <div class="nr" v-show='itemjieguo == undefined || itemjieguo.length ==0'>
            <div style="margin-top:50px;font-size:16px;text-align:center;">暂无内容</div>
        </div>
    </div>
    <div v-show='itemjieguo=="111"'>
        <div class="nr" >
            <!-- <div>暂无内容</div> -->
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'jibing-search',
    data() {
      return {
        inputvalue:"",
        itemjieguo:"111",
        list: [],
        loading: false,
        finished: false,
        page:1
      }
    },
    methods: {
        onLoad() {
            // console.log('aaaaaaaaa')

            setTimeout(() => {
                 this.page+=1
                this.getsearch(this.page)
            }, 500);
           
        },

        // 去详情
        todetails(e,id){

            this.$router.push({
            name:'bingzheng-jieshao',
            params: {id:id}
            }) 
        },
        getsearch(page){
            this.$get("api/gzh_index.php?action=symptoms_search", {
            title:this.inputvalue==''?'卤米松乳膏低至21.5':this.inputvalue,
                page:page,
                limit:30
            }).then(res => { 
                this.loading=false
                if(page==1){
                    if(res.data.length==0){
                        this.finished=true
                    }else{
                        this.itemjieguo=res.data
                    }
                    if(res.data.length>0&&res.data.length<30){
                        this.finished=true
                    }
                   
                }else{
                    if(res.data.length==0){
                        this.finished=true
                    }else{
                        for (const key in res.data) {
                            this.itemjieguo.push(res.data[key])
                        }
                    }
                    if(res.data.length>0&&res.data.length<30){
                        this.finished=true
                    }
                    
                }
                
            }).catch(err => {
            
            }); 
        }

    },
   
  }
</script>

<style scoped>


.d-f{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 20px;
}
.jibing-chaxun{
  width: 100%;
  height:100%;
}

input{
  width: 80%;
  height: 73px;
  outline: none;
  border:none;
  border: 1PX solid #F2F2F2;
  
  border-radius: 15px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size:26px;
  line-height: 26px;
  font-family:PingFang SC;
  font-weight:500;
}
.sousuo{
    width:10%;
    height:50px;
    font-size: 26px;
    line-height: 50px;
    background-color: rgba(6,162,85,1);
    color: #fff;
    text-align: center;
    margin-right:20px;
}

.nr{
    width: 100%;
    height:calc(100% - 93px);
    overflow: hidden;
    overflow-y: scroll;
}
.item{
    font-size: 16px;
    padding:20px 50px;
}

.van-list{
    padding:20px 20px;
}


</style>
<style scoped>
.van-list .van-cell{
    font-size: 28px!important;
    /* padding:20px 50px!important; */
    line-height: 40px;
}
.van-list{
    height:90vh;
}
</style>